<template>
    <van-nav-bar title="购物车" left-text="" left-arrow @click-left="goBack" />
    <van-checkbox-group v-model="checked">
        <div class="cart" v-for="item in cartlist">
            <van-checkbox :name="item.id"></van-checkbox>
            <van-swipe-cell>
                <van-card :price="item.total" :desc="'库存：' + item.product.stock" :title="item.product.name"
                    :thumb="item.product.thumb_text" @click-thumb="toPageProduct(item.proid)">
                    <template #tags>
                        <div>单价： {{ item.price }}</div>
                    </template>
                    <template #num>
                        <van-stepper v-model="item.nums" @change="ChangeNumber(item)" />
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="del(item)" />
                </template>
            </van-swipe-cell>
        </div>
    </van-checkbox-group>
    <!-- 提交订单 -->
    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedAll" @click="ChangeAll">全选</van-checkbox>
    </van-submit-bar>
</template>
<script setup>
const checked = ref([]);
const cartlist = ref([]);
const checkedAll = ref(false);
const { cookies } = useCookies();
const router = useRouter();
const route = useRoute();
const href = route.query.type
const goBack = () => {
    if(href){
        router.push("/");
    }else{
        history.back();
    }
    
};
const LoginUser = reactive(cookies.get("LoginUser") ?? {});
onBeforeMount(() => {
    getCartData();
});
const getCartData = async () => {
    let result = await Api.cartIndex({
        busid: LoginUser.id
    });
    if (result.code == 1) {
        cartlist.value = result.data
    }
}
const total = computed(() => {
    let num = 0;
    cartlist.value.forEach(item => {
        if (checked.value.includes(item.id)) {
            num += parseFloat(item.total)
        }
    })

    // 判断是否全选
    if (checked.value.length > 0 && checked.value.length >= cartlist.value.length) {
        checkedAll.value = true
    } else {
        checkedAll.value = false
    }

    return num * 100;
})
const ChangeAll = () => {
    if (checkedAll.value) {
        checked.value = cartlist.value.map(item => item.id)
    } else {
        checked.value = []
    }
}
const toPageProduct = (id) => {
    router.push({
        path: '/product/info',
        query: { proid: id }
    })
}
const ChangeNumber = async (val) => {
    let result = await Api.cartEdit({
        busid: LoginUser.id,
        nums: val.nums,
        cartid: val.id
    });

    if (result.code == 0) {
        showFailToast(result.msg);
    }
    getCartData();
}
const del = (val) => {
    showConfirmDialog({
        title: "删除",
        message: "确认是否删除" + val.product.name,
    })
        .then(async () => {
            let result = await Api.cartDel({
                busid: LoginUser.id,
                cartid: val.id
            });
            if (result.code == 1) {
                showSuccessToast({
                    message: result.msg,
                });
            } else {
                showFailToast(result.msg);
            }
            getCartData();
        })
        .catch(() => { });
}
const onSubmit = () => {
    if (checked.value <= 0) {
        showFailToast('未选中结算商品，请先选择');
        return false;
    }
    router.push({
        path: '/product/confirm',
        query: {
            cartids: checked.value.toString()
        }
    })
}
</script>
<style>
.cart {
    width: 100%;
    display: flex;
}

.van-swipe-cell {
    width: 100%;
}

.delete-button {
    height: 100%;
}
.van-checkbox__icon {
    margin: 10px;
}
.van-nav-bar {
    background: rgb(50, 128, 111);
}
.van-nav-bar__title{
    color: white;
}
.van-nav-bar .van-icon {
    color: white;
}
</style>